
import {
  getToken,
  setToken,
  removeToken,
  getUserInfo,
  setUserInfo,
  delUserInfo,
  getMenuList,
  delMenuList, setMenuList
} from '@/utils/storage'
import { getMenuApi, login } from '@/api/login'
// 状态
// 初始化的时候从缓存中读取状态 并赋值到初始化的状态上
// Vuex的持久化 如何实现 ？ Vuex和前端缓存相结合
const state = {
  token: getToken(), // 设置token初始状态   token持久化 => 放到缓存中
  userInfo: getUserInfo(), // 用户信息持久化
  menuList: getMenuList() // 菜单列表持久化
}
// 修改状态
const mutations = {
  // 设置token
  setToken (state, token) {
    state.token = token // 设置token  只是修改state的数据
    setToken(token) // vuex和 缓存数据的同步
  },
  setUserInfo (state, data) {
    state.userInfo = data
  },
  setMenuList (state, data) {
    state.menuList = data
  },
  // 退出登录删除缓存
  logout (state) {
    state.token = null // 删除vuex的token
    state.userInfo = {} // 删除vuex的用户信息
    removeToken() // 先清除 vuex  再清除缓存 vuex和 缓存数据的同步
    delUserInfo() // 删除用户缓存
    delMenuList() // 删除菜单缓存
  }
}
// 执行异步
const actions = {
  // 定义login action  也需要参数 调用action时 传递过来的参数
  async login (context, data) {
    const result = await login(data) // 实际上就是一个promise  result就是执行的结果
    // axios默认给数据加了一层data
    // console.log(result.data)
    if (result.data.token.token) {
      context.commit('setToken', result.data.token.token)
      setToken(result.data.token.token)
      context.commit('setUserInfo', result.data.user)
      setUserInfo(result.data.user)
      const { data } = await getMenuApi()
      context.commit('setMenuList', data)
      setMenuList(data)
    }
  }
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}
